<template>
	<!-- 使用地点故障数统计 -->
	<div class="statisBox heightMax publicbox">
		<div class="leftBox">
			<el-row class='row'>
				<el-col :span='3'>
					<div class="listName" style="margin-bottom: 0;">
						<i></i><span class="font14">故障统计</span>
					</div>
				</el-col>
				<el-col :span='7'>
					<div class="flex">
						<span class="font14" style="width: 100px;">使用单位 :</span>
						<el-input size="mini" placeholder="请输入使用单位" clearable v-model="searchQuery"></el-input>
					</div>
				</el-col>
			</el-row>
			<div class="leftBoxEcharts" ref='echarts'>

			</div>
		</div>
		<div class="rightBox">
			<div class="rightBoxTop">
				<div class="listName">
					<i></i><span class="font14">使用单位故障率排名</span>
				</div>
				<div class="flex" style="margin-bottom: 10px;">
					<span class="font14" style="width: 100px">选择时间 :</span>
					<el-date-picker size="mini" v-model="month" type="month" placeholder="选择月">
					</el-date-picker>
				</div>
				<div class="rightBoxTopScroll">
					<vueScroll>
						<div class="listItem" v-for="(item,index) in listItemText" :key='index'>
							<img :src="imgArr[index]" alt="">
							<div class="itemSon">
								<div>{{item.name}}</div>
								<div><span class="redText">{{item.num}}</span>次</div>
							</div>
						</div>
					</vueScroll>
				</div>
			</div>
			<div class="rightBoxBottom">
				<div class="listName">
					<i></i><span class="font14">故障统计</span>
				</div>
				<div ref='echartsPie' class="pie">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.LeftEcharts()
			this.Pieecharts()
		},
		data() {
			return {
				searchQuery: '',
				month: '',
				imgArr: [
					require('../../../assets/paiHangImg/1_1.png'),
					require('../../../assets/paiHangImg/1_2.png'),
					require('../../../assets/paiHangImg/1_3.png'),
					require('../../../assets/paiHangImg/1_4.png'),
					require('../../../assets/paiHangImg/1_5.png'),
					require('../../../assets/paiHangImg/1_6.png'),
					require('../../../assets/paiHangImg/1_7.png'),
					require('../../../assets/paiHangImg/1_8.png'),
					require('../../../assets/paiHangImg/1_9.png'),
					require('../../../assets/paiHangImg/1_10.png'),
				],
				listItemText: [{
						name: '轿厢报警按钮',
						num: 36225
					},
					{
						name: '安全回路断路',
						num: 36225
					},
					{
						name: '电梯运行时安全回路断路',
						num: 36225
					},
					{
						name: '关门故障',
						num: 36225
					},
					{
						name: '电梯困人',
						num: 36225
					},
					{
						name: '非平层停梯',
						num: 36225
					},
					{
						name: '轿厢在开锁区域外停止',
						num: 36225
					},
					{
						name: '其他阻止电梯再启动的故障',
						num: 36225
					},
					{
						name: '轿厢蹲底',
						num: 36225
					},
					{
						name: '楼层位置丢失',
						num: 36225
					}
				]
			}
		},
		methods: {
			Pieecharts() {
				let dom = this.$refs.echartsPie
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '15',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 234,
								name: '联盟广告'
							},
							{
								value: 135,
								name: '视频广告'
							},
							{
								value: 1548,
								name: '搜索引擎'
							}
						]
					}]
				})
			},
			LeftEcharts() {
				let dom = this.$refs.echarts
				let myChart = this.echarts.init(dom)
				// 绘制图表
				myChart.setOption({
					title: {
						text: '市民中心电梯故障数统计',
						x: 'center',
						y: 'top',
						textAlign: 'left'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						},
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] //{b}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}(次)'
						}
					}],
					series: [{
						name: '次数', //{a0}
						color: ['#409EFF'],
						type: 'line',
						stack: '总量',
						areaStyle: {}, //折现背景
						symbol: 'circle',
						temStyle: {
							normal: {
								color: '#595de4', //折点颜色
								lineStyle: {
									color: '#595de4', //折线颜色
									width: '3'
								}

							},
						},
						data: [4000, 3002, 1201, 1334, 190, 2230, 5210], //{c0}
					}]
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.statisBox {
		display: flex;
		flex-direction: row;

		.leftBox {
			width: 75%;
			height: 100%;
		}

		.leftBoxEcharts {
			width: 100%;
			height: 90%;
		}

		.rightBox {
			width: 25%;
			height: 100%;

			.rightBoxTop {
				width: 100%;
				height: 58%;
				margin-bottom: 10px;
				margin-bottom: 15px;
				box-sizing: border-box;

				.listItem {
					display: flex;
					align-items: center;
					padding: 5px;
					box-sizing: border-box;
					border-bottom: 1px solid #f4f5f8;

					.itemSon {
						text-align: left;
					}

					img {
						height: 100%;
						margin-right: 10px;
					}
				}

				.rightBoxTopScroll {
					height: 75%;
					// overflow-y: auto;
				}
			}

			.rightBoxBottom {
				width: 100%;
				height: 38%;

				.pie {
					width: 100%;
					height: 90%;
				}
			}
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;
		margin-bottom: 10px;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}
	}

	.redText {
		font-size: 18px;
		font-weight: 700;
		color: #c23531;
	}

	.flex,
	.row {
		display: flex;
		align-items: center;
	}
</style>
